<template>
    <div>
        <a-modal
            :visible="handleModalVisible"
            title="入党申请"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="100%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName="partyMember-full-modal"
            @cancel="closeVisible"
            >
            <template slot="footer" style="text-align:center;">
                <div v-if="isShow()">
                    <a-button @click="onSaveSubmit">
                        保存
                    </a-button>
                    <a-button class="blue-btn" @click="onSubmit">
                        提交
                    </a-button>
                </div>
                <div v-else>
                    <a-button class="blue-btn" @click="closeVisible">
                        关闭
                    </a-button>
                </div>
            </template>
            <a-tabs type="card" @change="callback">
                <a-tab-pane key="1" tab="申请表">
                    <p>系统提示：<span>请按发展党员手册要求提交入党申请。</span></p>
                    <h1 style="text-align:center;">递交入党申请书</h1>
                    <div>
                        <a-form-model
                            ref="ruleForm"
                            :model="form"
                            :rules="rules"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                        >
                            <a-form-model-item label="入党申请书范文:">
                                <p v-for="(item,index) in fanwenListData" :key="index">
                                    <span style="display:inline-block;min-width:max-content;">{{item.fmc}}</span>
                                    <span style="float: inline-end;">
                                        <a-button style="margin-right: 10px;" class="blue-btn" @click="openFiles(item)" >预览</a-button>
                                        <a-button style="margin-right: 10px;" class="blue-btn" @click="downloadFiles(item)" >下载附件</a-button>
                                    </span>
                                </p>
                            </a-form-model-item>
                            <a-form-model-item label="入党申请时间:" prop="frdsqsj">
                                <a-date-picker v-model="form.frdsqsj" @change="timeChange($event,'frdsqsj')" style="width:100%" v-if="form.id == '' || form.fhjmc == '递交入党申请书'"/>
                                <span v-else>{{ form.frdsqsj }}</span>
                            </a-form-model-item>
                            <a-form-model-item label="入党申请书:">
                                <a-upload style="display: inline-block;" :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="uploadClick">
                                    <a-button class="blue-btn" v-if="form.id == '' || form.fhjmc == '递交入党申请书'">上传pdf</a-button>
                                </a-upload>
                            </a-form-model-item>
                            <div :key="iframeDataKey">
                                <a-spin size="large" :spinning="loading">
                                    <iframe
                                        v-if="iframeSrc"
                                        :key="iframeKey"
                                        :src="iframeSrc"
                                        ref="iframeServerEditingRef"
                                        scrolling="auto"
                                        width="100%"
                                        height="550px"
                                        style="border: 0;"
                                    ></iframe>
                                </a-spin>
                            </div>
                        </a-form-model>
                    </div>
                </a-tab-pane>
                <a-tab-pane v-if="form.fhjmc !== '递交入党申请书'" key="2" tab="党员发展记录">
                    <div>
                        <div class="partyMemberDevelop-logs-maindiv">
                            <div class="partyMemberDevelop-logs-maindiv-left">
                                <div class="listTop"
                                    :class="{ 'tree-btn-box-hover' : item.focus }"
                                    v-for="(item, index) in arrayList"
                                    :key="index"
                                    @click="changeName(item.name,index)">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="partyMemberDevelop-logs-maindiv-right">
                                <div class="partyMemberDevelop-logs-infoDiv">
                                    <a-descriptions :title="logsInfo.fbzmc" bordered :column="4">
                                        <a-descriptions-item label="时间：">
                                            {{logsInfo.fjxsj}}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="地点：">
                                            {{logsInfo.fdd}}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="参会人员：">
                                            {{logsInfo.fcyry}}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="结果：">
                                            {{logsInfo.fjg}}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="结果描述：" :span="4">
                                            {{logsInfo.fjgms}}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="进行的方式：" :span="4">
                                            {{logsInfo.fjhdfs}}
                                        </a-descriptions-item>
                                        <a-descriptions-item label="附件：" :span="4">
                                            <p v-for="(item,index) in filesListData" :key="index">
                                                <span style="display:inline-block;min-width:max-content">{{item.fmc}}</span>
                                                <span style="float: inline-end;">
                                                    <a-button style="margin-right: 10px;" class="blue-btn" @click="openPDF(item)" >预览</a-button>
                                                    <a-button style="margin-right: 10px;" class="blue-btn" @click="downloadFiles(item)" >下载附件</a-button>
                                                </span>
                                            </p>
                                        </a-descriptions-item>
                                    </a-descriptions>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
        <personnelList ref="personnelListRef" :modaObj="modaObj" @checkPersonnel="checkPersonnel"></personnelList>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import { saveDfjl,fjupload,deleleMinioFile,fjlist,initBzFlow,downLoadOa,submitFlow,hjmclist,
        selectdyfzjl,fjedit,openFile, } from './service/index'
import personnelList from '../../administrativeOffice-new/modal/personnelList.vue'
import YchConstant from '@/api/YchConstant'
import blobType from '@/common/blobType'
import moment from 'moment'
export default {
    props:{
        passObj:{
            type:[Array,Object],
            default: () => {},
            required:false
        },
    },
    components:{
        compSelector,personnelList
    },
    data() {
        return {
            moment:moment,
            handleModalVisible: false,
            loading:false,
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            form: {
                flczt: "",
                fqdfzdxsj: "",
                fqdjjfzsj: "",
                fqdrdsj: "",
                fqdybdysj: "",
                frdsqsj: "",
                frdzt: "",
                fsffqlc: "",
                fuserid: "",
                fxm: "",
                id: "",
                oaid: '',
                jobid: '',
                fhjmc: ''
            },
            kongForm: {},
            rules: {
                frdsqsj: [{ required: true, message: '请输入入党申请时间', trigger: 'change' }],
            },
            dlList: [],
            xlList: [],
            modaObj: {},
            previewVisible: false,
            iframeKey:null,
            iframeSrc:'',
            iframeDataKey:null,
            arrayList: [],
            tabsKey: '1',
            logsInfo: {},
            filesListData: [],
            fanwenListData: []
        }

    },
    created() {
        this.kongForm = JSON.parse(JSON.stringify(this.form))
    },
    mounted(){
        this.getFanBen()
    },
    watch: {
        passObj(newval,oldVal){
            //console.log(newval)
            if(newval.fpid){
                this.form = newval
                this.form.id = newval.fpid
                this.form.oaid = newval.fpid
                this.form.frdsqsj = newval.fsqsj
                this.form.jobid = newval.jobid
                // this.getFjList(newval.jobid)
                this.getHjmclist()
            }
        },
    },
    methods: {
        // 右上角关闭后的回调
        closeVisible(e){
            this.$emit('success')
            this.handleModalVisible = false
            this.form = {...this.kongForm}
        },
        // 查看入党申请书范文的附件列表
        getFanBen(){
            fjlist({foaid:'RartyRdSqsZxSm001'}).then(res => {
                //console.log(res)
               this.fanwenListData = res.result.records
            })
        },
        isShow(){
            if(this.form.id == '' || this.form.fhjmc == '递交入党申请书'){
                return true
            } else if(this.form.fblzt == '待办' && this.form.fhjmc == '递交入党申请书'){
                return true
            } else {
                return false
            }
        },
        callback(key) {
            this.tabsKey = key
        },
        getFjList(id){
            this.loading = true
            fjlist({foaid:id}).then(res => {
                //console.log(res)
                let wjId = res.result.records[0].id
                this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI2 + YchConstant.SPZX_OA + '/oaFjzyk/downLoadOa?id=' + wjId
                this.iframeDataKey = Date.now()
                this.loading = false
            })
        },
        getHjmclist(){
            hjmclist().then(res => {
                this.logsFuntion(res.result)
            })
        },
        logsFuntion(result){
            this.arrayList = []
            result.forEach((item) => {
                let items = {
                    name: item,
                    focus: false,
                }
                this.arrayList.push(items)
            })
            let name = this.arrayList[0].name
            this.arrayList[0].focus = true
            this.changeName(name,0)
        },
        changeName (name,index) { // 点击列表某一条
            for (let i = 0; i < this.arrayList.length; i++) {
                index === i ? this.arrayList[i].focus = true : this.arrayList[i].focus = false
            }
            let data = {
                frdsqjlid: this.form.id,
                hjmc: name,
                // jobid: this.form.jobid
            }
            selectdyfzjl(data).then(res => {
                //console.log(res)
                // this.form = res.result.dy
                this.logsInfo = res.result.dy
                this.filesListData = res.result.fjList
                let wjId = this.filesListData[0].id
                if(index == 0 && this.tabsKey == '1'){
                    this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI2 + YchConstant.SPZX_OA + '/oaFjzyk/downLoadOa?id=' + wjId
                    this.iframeDataKey = Date.now()
                }
            })
        },
        checkMan(place,man){
            this.$nextTick(_ => {
                this.modaObj = {place: place,manList: man}
                this.$refs.personnelListRef.personnelListVisible = true
            })
        },
        // 选择人员
        checkPersonnel(place,id,name){
            //console.log(place,id,name)
            this.$refs.personnelListRef.personnelListVisible = false
            const data = this.form
            data[place] = name.toString()
        },
        timeChange(val,name){
            let data = this.form
            data[name] = val == null?null:moment(val).format('YYYY-MM-DD')
        },
        beforeUpload(e){
            return false
        },
        // 上传附件
        async uploadClick({file}){
            //console.log(file)
            //console.log(this.form)
            if(!this.form.id){
                let data = this.form
                const res = await initBzFlow(data)
                //console.log(res)
                // this.form = res.result
                this.form.id = res.result.DwMap.id
                this.form.jobid = res.result.jobMap.id
                this.form.fhjmc = res.result.jobMap.fhjmc
                if (res.success) {
                this.uploadClicka(file,this.form.jobid)
                }
            } else {
                this.uploadClicka(file,this.form.jobid)
            }
        },
        uploadClicka(file,id){
            //console.log(file)
            var that = this
                if(typeof file.uid !== 'undefined') {
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("oaid",id);
                //console.log(fileData)
                fjupload(fileData).then(res => {
                    //console.log('fileData',res)
                    if (res.success) {
                        that.$message.success(res.message)
                        fjlist({foaid:id}).then(res => {

                            let wjId = res.result.records[0].id
                            this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI2 + YchConstant.SPZX_OA + '/oaFjzyk/downLoadOa?id=' + wjId
                            //console.log(this.iframeSrc)
                            this.iframeDataKey = Date.now()

                        })
                    } else {
                        that.$message.warning(res.message)
                    }
                })
            }
        },
        // 预览
        openFiles(item){
          if(item.fwjlx.indexOf('pdf') !== -1){
              //console.log()
              window.open(
                  bootConfig[process.env.NODE_ENV].locality_ApI2+YchConstant.SPZX_OA+'/oaFjzyk/downLoadOa?id='+item.id
              )
            } else {
              openFile({id:item.id}).then(res => {
                if(!res.success){
                      this.$message.warning('当前附件类型不支持预览,请下载查看')
                } else {
                    window.open(res.result.wordUrl, '_blank')
                }
              })
            }
        },
        // pdf预览
        openPDF(item){
            //console.log(item)
            if(item.fwjlx == '.pdf'){
                window.open(
                    bootConfig[process.env.NODE_ENV].locality_ApI2+YchConstant.SPZX_OA+'/oaFjzyk/downLoadOa?id='+item.id
                )
            } else {
                this.openFiles(item)
            }
        },
        // 下载附件
        downloadFiles(val){
        //console.log('下载',val)
        var that = this
        var fileName = val.fmc
        downLoadOa({id:val.id}).then((data) => {
            // //console.log(data)
            if (!data) {
                that.$message.warning('文件下载失败')
                return
            }
            let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
            // this.vxModal.visabled = false;
        })
        },
        // 删除附件
        deleteFiles(idd){
            //console.log('idd',idd)
            deleleMinioFile({id:idd}).then(res => {
                if(res.code == 200){
                this.$message.success('删除成功')
                fjlist({foaid:this.form.jobid}).then(res => {
                    this.filesListData = []
                    this.filesListData = res.result.records
                })
                } else {
                this.$message.warning(res.message)
                }
            })
        },
        onSaveSubmit(){
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let data = this.form
                    initBzFlow(data).then(res => {
                        if(res.code == 200){
                            this.form.id = res.result.DwMap.id
                            this.form.jobid = res.result.jobMap.id
                            this.$message.success(res.message)
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let data = {
                        ...this.form,
                        oaid: this.form.id,
                        map: {},
                    }
                    if(this.form.id){
                        data = {
                            ...data,
                            currentNode: "",
                            dbrid: "",
                            fcyry: "",
                            fdd: "",
                            fjg: "",
                            fjgms: "",
                            fjhdfs: "",
                            lcmbCode: "",
                            nextNode: "",
                            nextNodeId: "",
                            opinion: "",
                            smgflag: ""
                        }
                        submitFlow(data).then(res => {
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.closeVisible()
                            } else {
                                this.$message.warning(res.message)
                            }
                        })
                    } else {
                        initBzFlow(data).then(res => {
                            if(res.code == 200){
                                this.form.id = res.result.DwMap.id
                                this.form.oaid = res.result.DwMap.id
                                this.form.jobid = res.result.jobMap.id
                                let dataA = {
                                    ...this.form,
                                    currentNode: "",
                                    dbrid: "",
                                    fcyry: "",
                                    fdd: "",
                                    fjg: "",
                                    fjgms: "",
                                    fjhdfs: "",
                                    lcmbCode: "",
                                    nextNode: "",
                                    nextNodeId: "",
                                    opinion: "",
                                    smgflag: ""
                                }
                                submitFlow(dataA).then(res => {
                                    if(res.code == 200){
                                        this.$message.success(res.message)
                                        this.closeVisible()
                                    } else {
                                        this.$message.warning(res.message)
                                    }
                                })
                            } else {
                                this.$message.warning(res.message)
                            }
                        })
                    }
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>
<style lang="less">
.partyMember-full-modal {
    .ant-modal {
        background-color: #5ca3e5;
        position: static;
        width: 100%;
        height: 100%;
        top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 auto !important;
    }
    .ant-modal-content {
        height: 100%;
    }
    .ant-modal-footer {
        text-align: center !important;
        .ant-btn-primary {
        background-color: #5ca3e5 !important;
        border-color: #5ca3e5 !important;
        }
    }
    .ant-form-item {
        margin-bottom: 0px;
        textarea.ant-input {
            margin-bottom: 0px;
            height: 46px;
        }
    }
    .ant-tabs.ant-tabs-card {
        .ant-tabs-tab {
        font-size: 16px;
        }
        .ant-tabs-bar .ant-tabs-tab-active {
            background: #5ca3e5 !important;
            border-color: #5ca3e5 !important;
            color: #fff;
            font-size: 16px;
        }
        .ant-tabs-top-content{
        /* height: 83vh; */
        height: calc(100vh - 157px);
        overflow: scroll;
        }
    }
    .ant-modal-close-x {
        font-size: 20px !important;
        margin-right: 40px;
        border: 1px solid;
        border-radius: 5px;
        height: 40px;
        width: 40px;
        margin-top: 20px;
        line-height: 40px !important;
        color: rgba(0, 0, 0, 0.45) !important;
    }
    .ant-upload-list-picture-card-container {
        width: 100%;
        height: 100%;
    }
}
.form-model-addAndEdit{
    .ant-form-item {
        .ant-form-item-label{
            width: 100px !important;
            font-size: 16px;
        }
        .ant-form-item-control-wrapper{
            // width: 180px !important;
            display: inline-block;
            font-size: 16px;
            .ant-form-item-control {}
        }
    }
    .formModel-item-input {
        width: 100%;
    }
}
.partyMemberDevelop-logs-maindiv {
    display: flex;
    .partyMemberDevelop-logs-maindiv-left {
        width: 300px;
        height: calc(100vh - 165px);
        overflow: scroll;
    }
    .partyMemberDevelop-logs-maindiv-right {
        width: 100%;
    }
}
.listTop {
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    padding: 5px;
}
.tree-btn-box-hover { background-color: #5ca3e5  !important; color: #fff !important; }
.partyMemberDevelop-logs-infoDiv {
    // width: 500px;
    min-height: 500px;
    margin: 0 auto;
    border: 1px solid #5ca3e5 ;
    border-radius: 20px;
    padding: 20px;
    font-size: 16px;
    h1 {
        text-align: center;
    }
}
</style>
